<template>
  <div>
    <div class="v-zd" v-if="show==true" @click="show=false"> </div>
    <div class="img-select-base">
      <div class="img-selected" :class="{'img-selected-arrow': show}">
        <img @click="showSelectPanel" class="img-style" :src="selectData.url">
      </div>
      <div class="img-select-option-panel" :style="panelStyle" v-if="show" ref="img-select-option-panel">
        <div class="img-select-option" @click="selectHandle(index, item)" :class="{'img-select-option-row-last': (index + 1) % 4 == 0, 'img-select-option-active': selectIndex === index}" v-for="(item, index) in textList" :key="index">
          <img class="img-style" :src="item.url">
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {textlist} from "@/api/creatCenter/longVideo";

export default {
  watch: {
    attr () {
      let time = setInterval(() => {
        if (this.textList.length > 0) {
          clearInterval(time)
          this.selectData = this.textList.find(e => e.effectColorStyle === this.attr)
        }
      }, 1)
    }
  },
  // 修改
  created () {
    // if (!this.attr) {
    //   this.init()
    // }
  },
  name: 'img-select',
  props: {
    'attr': {
      type: String,
      default: null
    }
  },
  data () {
    return {
      textList: [],
      selectIndex: 0,
      show: false,
      selectData: {},
      panelStyle: {}
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    showSelectPanel (e) {
      let screenX = e.screenX
      let screenWidth = document.body.clientWidth
      screenX + 715 < screenWidth ? this.panelStyle['left'] = '0px' : this.panelStyle['right'] = '0px'
      this.show = !this.show
    },
    selectHandle (index, item) {
      this.selectData = item
      this.selectIndex = index
      this.$emit('changed', item)
      this.show = false
    },
    async init () {
      this.textList = await textlist()
      this.selectData = this.textList[0]
      console.log("this.textList视频文字特效aaaaaaaaa",this.textList)
      this.attr ? this.selectData = this.textList.find(e => e.effectColorStyle === this.attr) : void 0
    }
  }
}
</script>

<style scoped lang="less">
  .v-zd{
    /*background-color: #42b983;*/
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 800;
  }
.img-select-base {
  z-index: 1000;
  position: relative;
  display: inline-block;
  .img-selected {
    z-index: 9999;
    height: 32px;
    min-width: 163px;
    padding:0 5px;
    border-radius: 5px;
    background-color: #313640;
    overflow: hidden;
    cursor: pointer;
  }
  .img-selected-arrow:before {
    position: absolute;
    bottom: -12px;
    left: calc(50% - 6px);
    content: ' ';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid #323E4E;
  }
  .img-select-option-panel {
    width: 715px;
    position: absolute;
    top: calc(100% + 12px);
    border-radius: 5px;
    padding: 20px;
    border: 4px solid #323E4E;
    box-shadow: 10px 6px 10px rgb(0 0 0 / 80%);
    background-color: #22252F;
    z-index: 2;
    .img-select-option {
      display: inline-block;
      height: 32px;
      overflow: hidden;
      cursor: pointer;
      padding:0 5px;
      background-color: #313640;
      border: 1px solid #313640;
      border-radius: 5px;
      margin-right: 5px;
    }
    .img-select-option-row-last {
      margin-right: 0px;
    }
    .img-select-option:hover, .img-select-option-active {
      border: 1px solid #0066cd;
    }
  }
}
.img-style {
  height: 50px;
}
</style>
